<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<style>
         body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
    background: #fff;
    transition: all 0.2s;
    }

    @keyframes filterChange {
    0% {
        top: 100%;
        filter: blur(0px) brightness(100%) opacity(1);

    }
    20% {
        top:80%;
        filter: blur(8px) brightness(95%) opacity(.9);

    }
    50% {
        top:20px;
        filter: blur(8px) brightness(80%) opacity(.8);

    }
    100% {
        top: 10px;
        filter: blur(8px) brightness(80%) opacity(.8);

    }
    }
    .wrap{
    position:relative;
    height:100px;
    
    }
    .img,.img2{
    width:300px;
    height:100%;
    position: absolute;
    z-index:2;
    background: url("https://uploadfile.huiyi8.com/up/9e/8c/45/9e8c4535a024d435be2d6fdecb32005c.jpg.270.jpg") no-repeat center center;
    background-size: 100% 100%;
    }
    .img2{
    z-index:1;
    top:100%;
    transform: scale(.95);
    animation: filterChange 5s infinite linear;
    
    
    }

        
    </style>       
</head>

<body>
       <h2>假彩色阴影</h2>
        <div class="wrap">
                  <div class="img"></div>
                        <div class="img2"></div>
                            </div> 
</body>

</html>